// This is the code for the PageRouteView.vue component.
<template>
    <div id="route-page">
        <router-view v-slot="{ Component, route }">
            <div v-if="!Component">页面加载中...</div>
            <transition v-else-if="route.meta.transition" :name="transitionName" mode="out-in">
                <keep-alive v-if="route.meta.keepAlive">
                    <component :is="Component" />
                </keep-alive>
                <component v-else :is="Component" />
            </transition>
            <component v-else :is="Component" />
        </router-view>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
const transitions = useTransitions();
const route = useRoute();
// 路由切换页面动画
const transitionName = computed(() => {
    let transition = route.meta.transition as string;
    // 随机
    if (
        !route.meta.transition ||
        route.meta.transition === transitions.supportTransisionName.random
    ) {
        transition = transitions.getRandomName();
    }
    return transition;
});
// 解决路由跳转正常，但页面不刷新的问题
const key = ref(route.path);
watch(key, () => {

    // // 解决页面刷新后，页面内容闪烁的问题
    // const content = document.getElementById('page-route-view');
    // if (content) {
    //     content.innerHTML = '';
    // }

});

</script>
